<script setup>
import {ref, computed, watch} from 'vue'
import PageContiner from "@/components/PageContiner.vue";
import {getQuestionAllByAdmin} from "@/api/question.js";
import {getTags} from "@/api/tag.js";
import router from "@/router/index.js";
import {questionRank} from "@/api/user.js";

const initQuestionParam = {
  title: '',
  content: '',
  tagId: '',
  startTime: '',
  endTime: '',
  current: 1,
  pageSize: 10
};

const questionQueryRequest = ref({
  title: '',
  content: '',
  tagId: '',
  startTime: '',
  endTime: '',
  current: 1,
  pageSize: 10
})

const tags = ref([]);
const getTagss = async () => {
  const res = await getTags(0);
  tags.value = res.data.data;
}

const tableData = ref([])
const total = ref()
const rankingData = ref([])

const getQuestionAllPage = async () => {
  // 自定义逻辑
  await fillData(questionQueryRequest.value)
}

const fillData = async (param) => {
  const result = await getQuestionAllByAdmin(param)
  const rankList = await questionRank()

  console.log("题目排行" + rankList.data.data)
  rankingData.value = rankList.data.data
  tableData.value = result.data.data.records;
  total.value = result.data.data.total
}

const handleSizeChange = (number) => {
  questionQueryRequest.value.current = 1;
  questionQueryRequest.value.pageSize = number;
  console.log('页大小' + number)
  getQuestionAllPage()
}
const handleCurrentChange = (number) => {
  questionQueryRequest.value.current = number;
  console.log('当前页' + number)
  getQuestionAllPage()
}

const truncateContent = (text) => {
  return text.length > 12 ? text.substring(0, 6) + '...' : text;
};

const colorRandom = ref('')

const getColor = () => {
  const randomNumber = Math.floor(Math.random() * 5) + 1;
  console.log('-----');
  console.log(randomNumber);
  switch (randomNumber) {
    case 1:
      colorRandom.value = 'primary';
      break;
    case 2:
      colorRandom.value = 'success';
      break;
    case 3:
      colorRandom.value = 'info';
      break;
    case 4:
      colorRandom.value = 'warning';
      break;
    case 5:
      colorRandom.value = 'danger';
      break;
  }
};

const resetParam = () => {
  questionQueryRequest.value = {
    title: '',
    content: '',
    tagId: '',
    startTime: '',
    endTime: '',
    current: 1,
    pageSize: 10
  };
  // window.location.reload();
  getQuestionAllPage()
}

const questionInfo = (row) => {
  console.log("跳转")
  console.log(row)
  router.push({
    path: '/questionInfo',
    query: {id: row.id}
  })
}


const rowClassName = ({row, rowIndex}) => {
  if (rowIndex === 0) {
    return 'first-place';
  } else if (rowIndex === 1) {
    return 'third-place';
  } else if (rowIndex === 2) {
    return 'second-place';
  }
  return '';
}


getColor()
getQuestionAllPage()
getTagss()

</script>
<template>


  <page-continer title="题目" style="width: 85%;margin-top: 40px">
    <el-row>
      <el-col :span="16">
        <div class="grid-content ep-bg-purple"/>
        <!--    表单区域-->
        <el-form inline style="margin-left: 10px">
          <el-form-item label="标题">
            <el-input v-model="questionQueryRequest.title" style="width: 120px"></el-input>
          </el-form-item>
          <el-form-item label="标签">
            <el-select
                v-model="questionQueryRequest.tagId"
                style="width: 100px"
                class="m-2"
                placeholder="请选择"
            >
              <el-option v-for="item in tags" :key="item.id" :label="item.tagName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getQuestionAllPage()" plain>搜索</el-button>
            <el-button type="reset" @click="resetParam">重置</el-button>
          </el-form-item>
        </el-form>
        <!--    <el-button type="primary" @click="onAddChannel">添加题目</el-button>-->
        <!--    表格区域-->
        <el-table :data="tableData" stripe style="width: 100%;margin-top: 10px">
          <el-table-column type="index" label="序号" width="100"></el-table-column>
          <el-table-column prop="title" label="标题">
            <template #default="{row}">
              <a @click="questionInfo(row)">
                {{ truncateContent(row.title) }}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="题目内容">
            <template #default="{row}">
              <a @click="questionInfo(row)">
                {{ truncateContent(row.content) }}
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="tags" label="标签">
            <template #default="{ row, $index }">
              <div>

                <el-tag
                    v-for="item in row.tagsName"
                    :key="item.tagsName"
                    :type="colorRandom"
                    effect="Light"
                    style="margin-right: 5px"
                >
                  <span> {{ item }}</span>
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="commAmount" label="通过率"></el-table-column>
        </el-table>
        <!--    分页区域-->
        <div class="demo-pagination-block">
          <el-pagination
              v-model:current-page="questionQueryRequest.current"
              v-model:page-size="questionQueryRequest.pageSize"
              :page-sizes="[2, 5, 10, 20]"
              :background="true"
              layout="jumper,total, sizes, prev, pager, next "
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              style="margin-top: 20px; justify-content: end"
          />
        </div>
      </el-col>
      <el-col :span="6" :offset="1">
        <div class="grid-content ep-bg-purple-light"/>
        <el-card class="ranking-card" style="text-align: center">
          <div slot="header" class="clearfix">
            <span style="display: block;margin-bottom: 20px">排行榜</span>
          </div>
          <el-table :data="rankingData" style="width: 100%" :row-class-name="rowClassName">
            <el-table-column type="index" prop="name" label="排名" class-name="name-column"></el-table-column>
            <el-table-column prop="name" label="用户" class-name="score-column">
              <template #default="{ row, $index }">
                <el-col :span="24">
                  <div class="sub-title"><span>  {{ row.userName }}</span></div>

                  <div class="demo-basic--circle" style="margin-left:5px">
                    <div class="block">
                      <el-avatar :size="35"
                                 :src="row.userAvatar"/>
                    </div>
                  </div>
                </el-col>

              </template>

            </el-table-column>
            <el-table-column prop="throughput" label="通过率" class-name="score-column"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

  </page-continer>
</template>

<style type="less" scoped>
a:hover {
  cursor: pointer;
  color: deepskyblue;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}


.ranking-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.el-table {
  font-family: 'Arial', sans-serif;
}

.el-table th,
.el-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.el-table thead th {
  background-color: #f5f7fa;
  font-weight: bold;
}


</style>
